<template>
	<view class="body">
		<view class="content">
			<image class="imgsize" :src="img" mode=""></image>
			<view class="list">
				<text class="title">设备名称</text>
				<text class="xqtext">{{name}}</text>
			</view>
			<view class="list">
				<text class="title">设备图纸</text>
				<text class="xqtext" style="width: 53%;">电气原理图</text>
				<view @click="yuantu(id)" class="lable">
					<text>查看</text>
					<image class="imgicon" src="../../static/img/more.png"></image>
				</view>
			</view>
			<view class="list">
				<text class="title">设备所属</text>
				<text class="xqtext">{{pname}}</text>
			</view>
			<view class="list">
				<text class="title">设备级别</text>
				<text class="xqtext" v-if="type=='1'">一级</text>
				<text class="xqtext" v-if="type=='2'">二级</text>
				<text class="xqtext" v-if="type=='3'">三级</text>
			</view>
			<view class="list">
				<text class="title">设备位置</text>
				<text class="xqtext">{{location}}</text>
			</view>
			<view class="list">
				<text class="title">当前状态</text>
				<view class="text1" v-if="status=='1'">
					<view class="tubiao1"></view>
					<view class="normal">正常</view>
				</view>
				<view class="text1" v-if="status=='2'">
					<view class="tubiao3"></view>
				    <view class="abnormal">异常</view>
				</view>
				<view class="text1" v-if="status=='3'">
					<view class="tubiao5"></view>
				    <view class="fault">故障</view>
				</view>
			</view>
			<view class="list">
				<text class="title">巡检人员</text>
				<text class="xqtext">{{nickname}}</text>
			</view>
			<view class="list">
				<text class="title">巡检时间</text>
				<text class="xqtext">{{createtime}}</text>
			</view>
			<view class="list">
				<text class="title">情况描述</text>
				<text v-if="status!='1'" class="xqtext">{{detail}}</text>
				<text v-if="status=='1'" class="xqtext">无</text>
			</view>
			<view class="list">
				<text class="title">故障图片</text>
			</view>
			<view class="list" v-if="status!='1'">
				<view @click="bigimg1"><image class="faultimg" :src="img1"></image></view>
				<view @click="bigimg2"><image class="faultimg" :src="img2"></image></view>
				<view @click="bigimg3"><image class="faultimg" :src="img3"></image></view>
			</view>
			<view class="list" v-if="status=='1'">
				<text class="tsize">无</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				name:'',
				nickname:'',
				location:'',
				img:'',
				img1:'',
				img2:'',
				img3:'',
				detail:'',
				createtime:'',
				status:'',
				type:'',
				pname:''
			}
		},
		methods:{
			getData () {
				uni.request({
					url:'http://xj.gccrw.cn/api/app/onedetail',
					data:{
						id:this.id
					},
					method:'POST',
					success:(res) => {
						this.name = res.data.data.name;
						this.nickname = res.data.data.nickname;
						this.location = res.data.data.location;
						this.createtime = res.data.data.createtime;
						this.status = res.data.data.status;
						this.img = res.data.data.img;
						this.img1 = res.data.data.img1;
						this.img2 = res.data.data.img2;
						this.img3 = res.data.data.img3;
						this.detail = res.data.data.detail;
						this.pname = res.data.data.pname;
						this.type = res.data.data.type
					}
				})
			},
			yuantu (id) {
				uni.navigateTo({
					url:'/pages/stadrawing/stadrawing?id=' + id
				})
			},
			bigimg1 () {
				uni.navigateTo({
					url:'/pages/bigimgone/bigimgone?id=' + this.id
				})
			},
			bigimg2 () {
				uni.navigateTo({
					url:'/pages/bigimgtwo/bigimgtwo?id=' + this.id
				})
			},
			bigimg3 () {
				uni.navigateTo({
					url:'/pages/bigimgthree/bigimgthree?id=' + this.id
				})
			}
		},
		onLoad (e) {
			console.log('11111111122---',e.id);
			this.id = e.id
		},
		onShow() {
			this.getData();
		}
	}
</script>

<style>
	.list {
		margin: 10upx;
		display: flex;
	}
	.imgsize {
		width: 100%;
		height: 350upx;
		border-radius: 20upx;
	}
	.faultimg { 
		width: 120upx;
		height: 120upx;
		margin: 20upx;
		border-radius: 20upx;
	}
	.tsize {
		font-size: 18px;
		margin: 20upx;
		color: #999999;
	}
	.title {
		color: #999999;
		font-size: 40upx;
		width: 25%;
	}
	.xqtext {
		margin-left: 40upx;
		font-size: 40upx;
		width: 70%;
	}
	.lable {
		color: #999999;
		font-size: 30upx;
		display: flex;
		align-items: center;
		/* margin-left: 226upx; */
	}
	.imgicon {
		width: 18upx;
		height: 25upx;
		margin-top: 2upx;
		padding: 2upx;
	}
    .text1 {
		font-size: 20upx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 40upx;
	}
	.normal {
		color: #2EC13C;
		padding-left: 14upx;
		padding-right: 20upx;
		font-size: 24upx;
		display: flex;
		align-items: center;
	}
	.abnormal {
		color: #FFD200;
		padding-left: 14upx;
		padding-right: 20upx;
		font-size: 24upx;
		display: flex;
		align-items: center;
	}
	.fault {
		color: #FD0006;
		padding-left: 14upx;
		padding-right: 20upx;
		font-size: 24upx;
		display: flex;
		align-items: center;
	}
	.tubiao1 {
		background-color: #2EC13C;
		border-radius: 50%;
		width: 28upx;
		height: 28upx;
		border: 4upx solid #C0ECC4;
	}
	.tubiao3 {
		background-color: #FFD200;
		border-radius: 50%;
		width: 28upx;
		height: 28upx;
		border: 4upx solid #FFF1B2;
	}
	.tubiao5 {
		background-color: #FD0006;
		border-radius: 50%;
		width: 28upx;
		height: 28upx;
		border: 4upx solid #FEB2B4;
	}
</style>
